<template>
  <div id="suppliers" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1">系统管理</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/suppliers">供应商</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card-body">
        <dl class="row">
          <dt class="col-4 text-end">名称</dt>
          <dd class="col-8">
            {{ detail.name }}
            <span v-if="detail.isDefault && detail.status" class="text-danger">
              (默认)
            </span>
          </dd>
          <dt class="col-4 text-end">拼音</dt>
          <dd class="col-8">{{ detail.pinyin }}</dd>
          <dt class="col-4 text-end">类型</dt>
          <dd class="col-8">{{ getTypeDesc(detail.supplierType) }}</dd>
          <dt class="col-4 text-end">备注</dt>
          <dd class="col-8">{{ detail.remark }}</dd>
          <dt class="col-4 text-end">默认支付方式</dt>
          <dd class="col-8">{{ detail.paymentMethodName }}</dd>
          <dt class="col-4 text-end">状态</dt>
          <dd class="col-8">
            <template v-if="detail.status">
              <span class="text-primary text-lg">启用</span>
            </template>
            <template v-else>
              <span class="text-danger">停用</span>
            </template>
          </dd>
          <dt class="col-4 text-end">BSP自动开票</dt>
          <dd class="col-8">
            <template v-if="detail.isBsp">
              <span class="text-primary text-lg">是</span>
            </template>
            <template v-else>
              <span class="text-danger">否</span>
            </template>
          </dd>

          <dt class="col-4 text-end">生成时间</dt>
          <dd class="col-8">{{ detail.createTime }}</dd>
          <dt class="col-4 text-end">修改时间</dt>
          <dd class="col-8">{{ detail.lastUpdate }}</dd>
        </dl>
      </div>
      <div class="card-footer row">
        <template v-if="detail.supplierType === 0 && detail.status">
          <button
            type="button"
            class="btn btn-primary ms-auto me-auto"
            @click.stop="setDefaultSupplier(info.id)"
          >
            设为默认
          </button>
        </template>

        <template v-if="detail.isBsp && detail.status">
          <button
            type="button"
            class="btn btn-danger mb-2"
            @click.stop="setBspSupplier(detail.id, 0)"
          >
            取消BSP自动开票
          </button>
        </template>
        <template v-else-if="detail.supplierType === 1 && detail.status">
          <button
            type="button"
            class="btn btn-primary ms-auto me-auto"
            @click.stop="setBspSupplier(detail.id, 1)"
          >
            设为BSP自动开票
          </button>
        </template>

        <button
          type="button"
          class="btn btn-primary ms-auto me-auto"
          @click.stop="editSupplier(detail.id)"
        >
          修改
        </button>
      </div>
    </template>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MyPagination from "@/components/my-pagination_h5.vue";
import $ from "jquery";
import {
  searchSupplier,
  updateDefaultSupplier,
  updateBspSupplier,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      detail: null,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.searchDetail();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchDetail: function () {
      searchSupplier(this.id, (v) => {
        this.detail = v;
      });
    },
    setDefaultSupplier: function (supplierId) {
      this.showLoading();
      updateDefaultSupplier(
        supplierId,
        (v) => {
          if (v.status === "OK") {
            this.searchDetail();
          } else {
            this.showErrMsg(v.errMsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    setBspSupplier: function (supplierId, status) {
      this.showLoading();
      const params = {
        status,
      };
      updateBspSupplier(
        supplierId,
        params,
        (v) => {
          if (v.status === "OK") {
            this.searchDetail();
          } else {
            this.showErrMsg(v.errMsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    getTypeDesc: function (val) {
      switch (val) {
        case 0:
          return "综合";
        case 1:
          return "机票";
        case 2:
          return "保险";
        case 3:
          return "酒店";
        case 4:
          return "旅游";
        case 5:
          return "火车票";
      }
    },
    editSupplier: function (id) {
      this.$router.push("/h5/supplier?id=" + id);
    },
  },
};
</script>
